import { StyleSheet } from 'react-native';
import { phonePx, px } from '../../../../../../util/adapt';
import { APP_YELLOW, APP_BLACK } from '../../../../../../constant/color';
import {
  CLASS_ROOM_RIGHT_SCALE,
  LIVE_HEIGHT,
  LIVE_WIDTH
} from '../../../../constant';
import { isIOS } from '../../../../../../constant';

export default StyleSheet.create({
  kid: {
    width: LIVE_WIDTH,
    height: LIVE_HEIGHT,
    justifyContent: 'flex-end',
    overflow: 'hidden',
    marginHorizontal: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    marginVertical: phonePx(2) * CLASS_ROOM_RIGHT_SCALE
  },
  loadVideo: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: LIVE_WIDTH,
    height: LIVE_HEIGHT,
    overflow: 'hidden',
    backgroundColor: APP_YELLOW
  },
  video: {
    marginLeft: isIOS ? -phonePx(33) : 0,
    width: isIOS ? LIVE_WIDTH + phonePx(33) : LIVE_WIDTH,
    height: LIVE_HEIGHT,
    backgroundColor: APP_BLACK
  },
  camera: {
    width: LIVE_WIDTH,
    height: LIVE_HEIGHT
  },
  remoteVideo: {
    marginRight: isIOS ? -phonePx(33) : 0,
    width: isIOS ? LIVE_WIDTH + phonePx(33) : LIVE_WIDTH,
    height: LIVE_HEIGHT,
    backgroundColor: APP_BLACK
  },
  content: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    flexDirection: 'row',
    width: LIVE_WIDTH,
    height: px(48) * CLASS_ROOM_RIGHT_SCALE,
    paddingTop: px(18) * CLASS_ROOM_RIGHT_SCALE,
    zIndex: 30
  },
  scoreContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: px(10) * CLASS_ROOM_RIGHT_SCALE,
    height: px(20) * CLASS_ROOM_RIGHT_SCALE
  },
  scoreIcon: {
    height: px(20) * CLASS_ROOM_RIGHT_SCALE,
    width: px(20) * CLASS_ROOM_RIGHT_SCALE
  },
  score: {
    fontSize: px(20) * CLASS_ROOM_RIGHT_SCALE,
    color: '#fff',
    marginLeft: px(4) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: '600'
  },
  nameContent: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: LIVE_WIDTH,
    height: phonePx(24) * CLASS_ROOM_RIGHT_SCALE,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  name: {
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    lineHeight: phonePx(14) * CLASS_ROOM_RIGHT_SCALE,
    color: '#fff',
    fontWeight: '500',
    marginLeft: phonePx(6) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(35) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(7) * CLASS_ROOM_RIGHT_SCALE
  },
  goldContent: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: phonePx(8) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(14) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: phonePx(7) * CLASS_ROOM_RIGHT_SCALE,
    width: phonePx(25) * CLASS_ROOM_RIGHT_SCALE
  },
  goldIcon: {
    width: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(10) * CLASS_ROOM_RIGHT_SCALE
  },
  goldDesc: {
    marginLeft: phonePx(2) * CLASS_ROOM_RIGHT_SCALE,
    fontSize: phonePx(10) * CLASS_ROOM_RIGHT_SCALE,
    color: '#ffffff',
    fontWeight: '500'
  },
  icon: {
    marginLeft: px(6) * CLASS_ROOM_RIGHT_SCALE,
    width: px(14) * CLASS_ROOM_RIGHT_SCALE,
    height: px(11) * CLASS_ROOM_RIGHT_SCALE,
    marginTop: px(3) * CLASS_ROOM_RIGHT_SCALE
  },
  microphone: {
    width: px(11) * CLASS_ROOM_RIGHT_SCALE,
    height: px(17) * CLASS_ROOM_RIGHT_SCALE,
    position: 'absolute',
    right: px(10) * CLASS_ROOM_RIGHT_SCALE,
    top: px(19) * CLASS_ROOM_RIGHT_SCALE
  },
  mask: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: LIVE_WIDTH,
    height: LIVE_HEIGHT,
    backgroundColor: 'rgba(rgba(42, 42, 42, 0.6)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 20
  },
  maskDesc: {
    fontSize: px(20) * CLASS_ROOM_RIGHT_SCALE,
    color: '#fff',
    fontWeight: '600'
  },
  add: {
    position: 'absolute',
    color: '#FF7B61',
    fontSize: px(40) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: 'bold',
    zIndex: 20
  },
  addScore: {
    position: 'absolute',
    zIndex: 20,
    width: phonePx(20) * CLASS_ROOM_RIGHT_SCALE,
    height: phonePx(20) * CLASS_ROOM_RIGHT_SCALE
  },
  addDesc: {
    position: 'absolute',
    top: phonePx(18) * CLASS_ROOM_RIGHT_SCALE,
    color: '#fff',
    fontSize: phonePx(14) * CLASS_ROOM_RIGHT_SCALE,
    lineHeight: phonePx(20) * CLASS_ROOM_RIGHT_SCALE,
    fontWeight: 'bold'
  },
  face: {
    borderColor: 'red',
    borderWidth: 1
  },
  corner: {
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 31
  },
  getCoin: {
    left: phonePx(28) * CLASS_ROOM_RIGHT_SCALE,
    top: phonePx(19) * CLASS_ROOM_RIGHT_SCALE
  },
  problem: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(42, 42, 42, .6)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  problemDesc: {
    color: '#FFFFFF',
    fontSize: phonePx(10),
    fontWeight: '500'
  }
});
